<template>
  <Panel :title="title" class="create_body">
    <el-form ref="form" :model="model" :rules="rules" label-position="top" label-width="70px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item prop="problemId" label="Problem ID"
                        required>
            {{ model.problemId }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="title" label="Title" required>
            <el-input placeholder="Title" v-model="model.title"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item prop="timeLimit" label="Time Limit(ms)">
            <el-input type="Number" placeholder="Time Limit(ms)" v-model="model.timeLimit"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="memoryLimit" label="Memory Limit(kB)">
            <el-input type="Number" placeholder="Memory Limit(kB)" v-model="model.memoryLimit"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item prop="isSpj" label="Special Judge">
            <el-checkbox v-model="model.isSpj">Use Special Judge</el-checkbox>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item prop="description" label="Problem Description">
        <markdown-editor refId="description" v-model="model.description"></markdown-editor>
      </el-form-item>
      <el-form-item prop="inputDesc" label="Input Description">
        <markdown-editor refId="inputDesc" v-model="model.inputDesc"></markdown-editor>
      </el-form-item>
      <el-form-item prop="outputDesc" label="Output Description">
        <markdown-editor refId="outputDesc" v-model="model.outputDesc"></markdown-editor>
      </el-form-item>
      <el-form-item prop="inputSample" label="Input Sample">
        <el-input type="textarea" :rows="5" v-model="model.inputSample"></el-input>
      </el-form-item>
      <el-form-item prop="outputSample" label="Output Sample">
        <el-input type="textarea" :rows="5" v-model="model.outputSample"></el-input>
      </el-form-item>
      <el-form-item prop="hint" label="Hint">
        <el-input type="textarea" :rows="5" v-model="model.hint"></el-input>
      </el-form-item>
      <el-form-item prop="source" label="Source">
        <el-input placeholder="Source" v-model="model.source"></el-input>
      </el-form-item>
      <el-form-item prop="dataDesc" label="数据范围">
        <markdown-editor refId="dataDesc" v-model="model.dataDesc"></markdown-editor>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click.native="submit('form')">保存</el-button>
      </el-form-item>
    </el-form>

    <!--    题目的数据-->
    <el-table
        :data="fileList"
        border
        style="width: 100%">
      <el-table-column
          fixed
          prop="fileName"
          label="文件名"
          width="150">
      </el-table-column>

      <el-table-column
          fixed
          label="文件类型"
          width="150">
        <template slot-scope="scope">
          <div> {{ scope.row.fileName.substr(scope.row.fileName.lastIndexOf(".")) }}</div>
        </template>
      </el-table-column>

      <el-table-column
          fixed="right"
          label="操作"
          width="150">
        <template slot-scope="scope">
          <el-button @click="handleRename(scope.$index)" type="text" size="small">重命名</el-button>
          <el-button @click="handleDelete(scope.$index)" type="text" size="small">删除</el-button>
          <el-button @click="handleEdit(scope.$index, scope.row)" type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </Panel>
</template>

<script>
import {createAndUpdateProblem, getProblemDetail} from '@/network/problem'

import ElButton from "element-ui/packages/button/src/button";

export default {
  components: {ElButton},
  data() {
    return {
      rules: {
        problemId: {required: true, trigger: 'blur'},
        title: {required: true, trigger: 'blur'},
        description: {required: false, trigger: 'blur'},
        inputDesc: {required: false, trigger: 'blur'},
        outputDesc: {required: false, trigger: 'blur'},
        inputSample: {required: false, trigger: 'blur'},
        outputSample: {required: false, trigger: 'blur'},
        dataDesc: {required: false, trigger: 'blur'}
      },
      mode: '',
      model: {
        problemId: -1,
        title: '',
        timeLimit: null,
        memoryLimit: null,
        isSpj: false,
        description: '',
        inputDesc: '',
        outputDesc: '',
        inputSample: '',
        outputSample: '',
        hint: '',
        source: '',
        dataDesc: ''

      },
      fileList: [{
        fileName: 'filename.in'
      },
        {
          fileName: 'filename.in'
        }],
      testCaseUploaded: false,
      title: '',
      routeName: ''
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init: function () {
      this.routeName = this.$route.name;

      this.$refs['form'].resetFields();

      if (this.$route.path.endsWith("create") === false) {
        this.model.problemId = this.$route.params.problemId;
        getProblemDetail(this.model.problemId).then(res => {
          this.model = res.data;
          this.testCaseUploaded = true;
        })
      } else {
        this.model.problemId = -1;
      }


    },
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.model);
          createAndUpdateProblem(this.model).then(res => {
            this.$message.success("Upload problem successfully");

          }).catch(_ => {
            console.log(_);
          })
        } else {
          return false
        }
      })
    },
    handleRename(index) {
      this.$prompt('请输入文件名', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({value}) => {
        //todo 进行重命名的后端修改
        this.fileList[index].fileName = value;
      });
    },
    handleDelete(index) {
      console.log(index);
    },
    handleEdit(index, row) {
      // this.$prompt('请输入', row.fileName, {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   showInput: 'true',
      //   inputType:'textarea'
      // }).then(({value}) => {
      //   //todo 进行编辑的后端修改
      //   //todo 根本就不对
      //   this.fileList[index].fileName = value;
      // });
    }
  },
  watch: {
    '$route': function (newVal, oldVal) {
      if (newVal !== oldVal) {
        this.init()
      }
    }
  }
}
</script>


<style>

.create_body {
  width: 65%;
  left: 50%;
  alignment: left;
}

</style>

